<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            .banner {
                position: relative;
            }

            .banner img {
                width: 100%;
            }

            span {
                position: absolute;
                width: 30px;
                height: 30px;
                background: rgb(0, 0, 0, 0.3);
                line-height: 30px;
                text-align: center;
                border-radius: 20px;
                color: white;
            }

            .last {
                top: 50%;
                left: 0;
                transform: translate(100%, -50%);
            }

            .next {
                top: 50%;
                right: 0;
                transform: translate(-100%, -50%);
            }

            ol {
                display: flex;
                position: absolute;
                left: 50%;
                bottom: 20px;
                width: 70px;
                justify-content: space-between;
            }

            li {
                list-style: none;
                width: 10px;
                height: 10px;
                border-radius: 5px;
                background-color: #999999;
            }

            li:first-child {
                background-color: white;
            }

        </style>


    </head>
    <body>


        <div class="banner">
            <img src="images/003_02.jpg">
            <span class="last"> <  </span>
            <span class="next"> > </span>
            <ol>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ol>
        </div>

    </body>
</html>